<template>
  <div class="app">
    <el-container>
      <el-header>
        <nav class="nav-container">
          <router-link to="/" class="logo">
            流心花店
          </router-link>
          
          <div class="nav-links">
            <router-link to="/" class="nav-link">首页</router-link>
            <router-link to="/products" class="nav-link">产品列表</router-link>
          </div>

          <div class="nav-right">
            <template v-if="isLoggedIn">
              <el-dropdown>
                <span class="user-menu">
                  {{ username }}
                  <el-icon><CaretBottom /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- <el-dropdown-item>
                      <router-link to="/profile">个人中心</router-link>
                    </el-dropdown-item> -->
                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              <router-link to="/login" class="nav-button">登录</router-link>
              <router-link to="/register" class="nav-button">注册</router-link>
            </template>
          </div>
        </nav>
      </el-header>

      <el-main>
        <router-view />
      </el-main>

      <el-footer>
        <div class="footer-content">
          <div class="footer-section">
            <h3>联系我们</h3>
            <p>电话：010-12345678</p>
            <p>邮箱：contact@flowershop.com</p>
            <p>地址：北京市朝阳区xxx街xxx号</p>
          </div>
          <div class="footer-section">
            <h3>营业时间</h3>
            <p>周一至周五：09:00-21:00</p>
            <p>周六至周日：10:00-22:00</p>
          </div>
          <div class="footer-section">
            <h3>关注我们</h3>
            <div class="social-links">
              <a href="#" target="_blank">微信</a>
              <a href="#" target="_blank">微博</a>
              <a href="#" target="_blank">抖音</a>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>&copy; 2025 流心花店. All rights reserved.</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { CaretBottom } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  name: 'App',
  components: {
    CaretBottom
  },
  setup() {
    const router = useRouter()
    const store = useStore()

    const isLoggedIn = computed(() => store.getters.isLoggedIn)
    const username = computed(() => store.getters.username)

    const handleLogout = () => {
      store.dispatch('logout')
      ElMessage.success('已退出登录')
      router.push('/login')
    }

    onMounted(() => {
      store.dispatch('initApp')
    })

    return {
      isLoggedIn,
      username,
      handleLogout
    }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  min-height: 100vh;
  
  .el-container {
    min-height: 100vh;
  }

  .el-header {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 0;

    .nav-container {
      max-width: 1200px;
      margin: 0 auto;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .logo {
        font-size: 24px;
        font-weight: bold;
        color: #409EFF;
        text-decoration: none;
      }

      .nav-links {
        display: flex;
        gap: 20px;

        .nav-link {
          color: #333;
          text-decoration: none;
          font-size: 16px;
          padding: 8px 12px;
          border-radius: 4px;
          transition: all 0.3s;

          &:hover, &.router-link-active {
            color: #409EFF;
            background-color: #ecf5ff;
          }
        }
      }

      .nav-right {
        display: flex;
        align-items: center;
        gap: 16px;

        .nav-button {
          padding: 8px 16px;
          border-radius: 4px;
          text-decoration: none;
          transition: all 0.3s;

          &:first-child {
            color: #409EFF;
            background-color: #ecf5ff;

            &:hover {
              background-color: #d9ecff;
            }
          }

          &:last-child {
            color: #fff;
            background-color: #409EFF;

            &:hover {
              background-color: #66b1ff;
            }
          }
        }

        .user-menu {
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }

  .el-main {
    padding-top: 80px;
    min-height: calc(100vh - 60px - 200px);
  }

  .el-footer {
    background-color: #f5f7fa;
    padding: 40px 20px 20px;

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-bottom: 30px;

      .footer-section {
        h3 {
          font-size: 18px;
          color: #333;
          margin-bottom: 16px;
        }

        p {
          color: #666;
          line-height: 1.8;
        }

        .social-links {
          display: flex;
          gap: 16px;

          a {
            color: #666;
            text-decoration: none;

            &:hover {
              color: #409EFF;
            }
          }
        }
      }
    }

    .footer-bottom {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid #e4e7ed;
      color: #909399;
    }
  }
}

// 全局样式
a {
  text-decoration: none;
  color: inherit;
}

.el-dropdown-menu__item {
  a {
    display: block;
    width: 100%;
  }
}
</style>
